<style type="text/css" media="all">
	.messageList {
		padding: 10px;
		margin-bottom: -45px;
	}

	.messageContent {
		word-break: break-word;
		position: relative;
		line-height: 20px;
		top: -50px;
		left:60px;
		width:200px;
        padding: 10px;
        background: rgba(197, 206, 207, 0.24);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
	}

	.messageContent:after 
    {
        content: '';
        position: absolute;
        border-style: solid;
        border-width: 12px 10px 12px 0;
        border-color: transparent rgba(197, 206, 207, 0.24);
        display: block;
        width: 0;
        z-index: 1;
        left: -10px;
        top: 20px;
    }

	.allCount {
		position: relative;
		right: 0px;
		float: right;
	}

	.messageTime {
		margin-bottom: -5px;
		padding-top:5px;
	}

	.sender {
		color: #0882f0;
	}
	#commentListMasker{
	      z-index: 11;
	      height: 100%;
	      width: 100%;
	      position: absolute;
	      top: 0;
	      left: 0;
	      background-color: rgba(0,0,0,0.5);
	      display: none;
	   }
	   .optionsContent{
      position: fixed !important;
      z-index: 1100;
      display: none;
      background-color: white;
	  border: 5px solid #111 !important;
      /*height: 300px;*/
      width:220px;
       -webkit-box-shadow: rgba(255,255,255,0.4) 1px 1px 1px, inset rgba(000,000,000,0.7) 1px 1px 1px;
   -moz-box-shadow: rgba(255,255,255,0.4) 1px 1px 1px, inset rgba(000,000,000,0.7) 1px 1px 1px;
   box-shadow: rgba(255,255,255,0.4) 1px 1px 1px, inset rgba(000,000,000,0.7) 1px 1px 1px;
   }
   .optionTitle {
   	/*font: 14px/1.25 "Helvetica Neue", sans-serif;*/
   	font-size: 23px;
	padding: 10px;
	position: relative !important;
	background: #1C66AE;
	color: white;
	font-weight: bold;
	text-shadow: 0px 0px 0px #1C66AE;
	zoom: 1;

   }
   .option {
   	font-size: 20px;
   	padding:10px;
   }
   .option:active {
   	font-size: 20px;
   	padding:10px;
   	background-color:#FFCC00;
   }
   #reply,#transpond {
   	border-bottom: 1px solid #ccc;
   }

</style>

<script id="commentListTemplate" type="text/x-jquery-tmpl">
<div class="messageList" data-id=<%=id%> data-friendid=<%=friendid%> data-name=<%=friendname %>> 
	<div class="tweetListImg" data-authorid=<%=friendid%> data-author=<%=friendname%> data-id=<%=id%>>

	<%
if( typeof portrait === "undefined"){
	portrait = "../base/img/widget_dface.ing"
}
	%>


	<%
if(portrait==="/img/portrait.gif" ){
	portrait = "../base/img/widget_dface.ing"
}
	%>




		<img src="<%=portrait%>" alt="" onerror="javascript:this.src='../base/img/widget_dface.ing';"></div>
	<div class="messageContent" data-id=<%=id%> data-friendid=<%=friendid%> data-name=<%=friendname %> data-senderid =<%=senderid%>>
		<div>
			<span>
		<%			
		if(sendername===friendname){
		%>
			<span class="sender"><%=sendername%></span>:


		<% 
		}else { 
		%>
			发给  <span class="sender"><%=friendname%></span>:
		<%
		}
		%>

				<span id="span<%=id%>"><%=content%></span>
										
				
			</span>
		</div>
		<div class="h6">
			<div class="messageTime">
				<%=JSON.stringify(pubDate).substring(1,11)%>
				<span class="allCount">共有<%=messageCount%>条留言</span>
			</div>
		</div>
	</div>
</div>
</script>

<!-- header -->
<header class="bar-title">
	<h1 class="left-title">
		<span class="icon-question-sign" onload="alert("123")"></span>
		我的空间
	</h1>
	<div class="right-banner">
		<span class="editBtn icon-edit imgsize"></span>
	</div>
</header>

<!-- uncomment this if you want a sencondary-bars

<nav class="bar-standard bar-header-secondary"></nav>
-->
<!-- content -->

<nav class="my-nav-menu" data-value="my/comment-list">
</nav>

<div class="content">
<list id="my-my-comment-list" 
    autoLoad="false"
    isPullDownRefresh="true"  
    jsonRoot="messageList"
    bundle="fs"
    paging="true"
    iScroll="true"
    _itemTemplate="commentListTemplate"></list>
</div>

</div>
<!-- 回复遮罩层 -->
<div id="commentListMasker"></div>
<!-- 长按留言弹出的选择div -->
<div class="optionsContent ui-corner-all">
	<div class="optionTitle">选择</div>
	<div class="option" id="reply">回复</div>
	<div class="option" id="transpond">转发</div>
	<div class="option" id="del">删除</div>
	
</div>
<!-- 长按留言弹出的选择div -->
<footer class="footer-menu" data-value="my"></footer>